Code Playground

console.log("Event Fired")
let canvas, ctx;
let grains = [];
const numGrains = 2000;
let grainsPassedCenter = 0;
let timerStarted = false;
let timerEnded = false;
let startTime;
let endTime;
let lastGrainPassedTime = null;

const glassThickness = 6;

window.onload = function () {
	initializeCanvas();
	initializeGrains();
	startTimer();
	animate();
};

function initializeCanvas() {
	canvas = document.getElementById("hourglassCanvas");
	ctx = canvas.getContext("2d");
	canvas.width = 800;
	canvas.height = 1000;
}

function initializeGrains() {
	grains = [];
	grainsPassedCenter = 0;
	const startY = canvas.height / 2 - neckHeight / 2 - glassThickness; // Just above the center
	const endY = 120 + glassThickness;
	const spreadX = hourglassWidth - 2 * glassThickness;

const cellSize = 4;
	const spatialHash = new Map();

for (let i = 0; i < numGrains; i++) {
		let x, y;
		let placed = false;
		let attempts = 0;
		const maxAttempts = 1000;

while (!placed && attempts < maxAttempts) {
			x = canvas.width / 2 + (Math.random() - 0.5) * spreadX;
			y = startY - Math.random() * (startY - endY); // Fill upwards
			attempts++;

const cellX = Math.floor(x / cellSize);
			const cellY = Math.floor(y / cellSize);
			const cellKey = `${cellX},${cellY}`;

const nearbyKeys = [
				cellKey,
				`${cellX - 1},${cellY}`,
				`${cellX + 1},${cellY}`,
				`${cellX},${cellY - 1}`,
				`${cellX},${cellY + 1}`,
				`${cellX - 1},${cellY - 1}`,
				`${cellX + 1},${cellY - 1}`,
				`${cellX - 1},${cellY + 1}`,
				`${cellX + 1},${cellY + 1}`
			];

if (!overlaps && isInsideHourglass(x, y, 2)) {
				// Check if inside hourglass
				placed = true;
				const grain = {
					x: x,
					y: y,
					radius: 3,
					collisionRadius: 3,
					velocity: { x: 0, y: 0 },
					acceleration: 0,
					passedCenter: false,
					isDone: false
				};
				grains.push(grain);

if (!spatialHash.has(cellKey)) {
					spatialHash.set(cellKey, []);
				}
				spatialHash.get(cellKey).push(grain);
			}
		}

// If we couldn't place the grain after max attempts, skip it
		if (!placed) {
			console.warn(`Couldn't place grain ${i}`);
		}
	}

console.log(`Placed ${grains.length} out of ${numGrains} grains`);
}

function startTimer() {
	timerStarted = true;
	startTime = Date.now();
}

// Hourglass parameters
const hourglassWidth = 500;
const hourglassHeight = 800;
const neckWidth = 50;
const neckHeight = 20;
const curvature = 200;

function drawHourglass() {
	const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
	gradient.addColorStop(0, "rgba(0, 255, 255, 0.7)"); // Cyan
	gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.9)"); // White
	gradient.addColorStop(0.5, "rgba(0, 255, 255, 0.7)"); // Cyan
	gradient.addColorStop(0.7, "rgba(255, 255, 255, 0.9)"); // White
	gradient.addColorStop(1, "rgba(0, 255, 255, 0.7)"); // Cyan

// Draw the main outline
	ctx.beginPath();

// Top half
	ctx.moveTo(canvas.width / 2 - hourglassWidth / 2, 100); // Doubled from 50
	ctx.lineTo(canvas.width / 2 + hourglassWidth / 2, 100); // Doubled from 50
	ctx.quadraticCurveTo(
		canvas.width / 2 + hourglassWidth / 2,
		canvas.height / 2 - curvature,
		canvas.width / 2 + neckWidth / 2,
		canvas.height / 2 - neckHeight / 2
	);

// Straight center part
	ctx.lineTo(
		canvas.width / 2 + neckWidth / 2,
		canvas.height / 2 + neckHeight / 2
	);

// Bottom half
	ctx.quadraticCurveTo(
		canvas.width / 2 + hourglassWidth / 2,
		canvas.height / 2 + curvature,
		canvas.width / 2 + hourglassWidth / 2,
		canvas.height - 100 // Doubled from 50
	);
	ctx.lineTo(canvas.width / 2 - hourglassWidth / 2, canvas.height - 100);
	ctx.quadraticCurveTo(
		canvas.width / 2 - hourglassWidth / 2,
		canvas.height / 2 + curvature,
		canvas.width / 2 - neckWidth / 2,
		canvas.height / 2 + neckHeight / 2
	);

// Straight center part
	ctx.lineTo(
		canvas.width / 2 - neckWidth / 2,
		canvas.height / 2 - neckHeight / 2
	);

ctx.quadraticCurveTo(
		canvas.width / 2 - hourglassWidth / 2,
		canvas.height / 2 - curvature,
		canvas.width / 2 - hourglassWidth / 2,
		100
	);

ctx.closePath();

ctx.strokeStyle = gradient;
	ctx.lineWidth = 6;
	ctx.stroke();

//drawCollisionBoundary();
}

function drawCollisionBoundary() {
	ctx.beginPath();
	for (
		let y = 100 + glassThickness;
		y <= canvas.height - 100 - glassThickness;
		y++
	) {
		// Doubled from 50
		const width = getHourglassWidthAtY(y);
		const x1 = canvas.width / 2 - width / 2;
		const x2 = canvas.width / 2 + width / 2;
		ctx.moveTo(x1, y);
		ctx.lineTo(x2, y);
	}
	ctx.strokeStyle = "rgba(255, 0, 0, 0.3)";
	ctx.lineWidth = 1;
	ctx.stroke();
}

function getHourglassWidthAtY(y) {
	const halfHeight = (canvas.height - 200) / 2;
	const centerY = canvas.height / 2;

if (y < centerY - neckHeight / 2) {
		// Top half
		const t = (y - 100) / (halfHeight - neckHeight / 2);
		return hourglassWidth * (1 - t * t) + neckWidth * t * t - 2 * glassThickness;
	} else if (y > centerY + neckHeight / 2) {
		// Bottom half
		const t = (canvas.height - 100 - y) / (halfHeight - neckHeight / 2);
		return hourglassWidth * (1 - t * t) + neckWidth * t * t - 2 * glassThickness;
	} else {
		// Neck
		return neckWidth - 2 * glassThickness;
	}
}

function isInsideHourglass(x, y, radius) {
	const hourglassCenter = canvas.width / 2;
	const hourglassWidthAtY = getHourglassWidthAtY(y);
	return (
		x >= hourglassCenter - hourglassWidthAtY / 2 + radius &&
		x <= hourglassCenter + hourglassWidthAtY / 2 - radius &&
		y >= 100 + glassThickness + radius &&
		y <= canvas.height - 100 - glassThickness - radius
	);
}

function getHourglassNormalAt(x, y) {
	const dy = 1;
	const widthAtY = getHourglassWidthAtY(y);
	const widthAtYPlusDy = getHourglassWidthAtY(y + dy);
	const dx = (widthAtYPlusDy - widthAtY) / 2;
	const length = Math.sqrt(dx * dx + dy * dy);
	return { x: dy / length, y: -dx / length };
}

let grainsReachedBottom = 0;

function updateSandGrains() {
	const spatialHash = new Map();
	const cellSize = 4;
	const settlingThreshold = 0.05; // Velocity threshold for considering a grain settled
	const settlingFriction = 0.95; // Higher friction for settled grains
	const settlingYThreshold = canvas.height * 0.8; // 80% down the hourglass

grains.forEach((grain) => {
		let canSettle = grain.y > settlingYThreshold;

// Apply small random forces in the neck area
		if (
			grain.y > canvas.height / 2 - neckHeight / 2 &&
			grain.y < canvas.height / 2 + neckHeight / 2
		) {
			grain.velocity.x += (Math.random() - 0.5) * 0.01;
			grain.velocity.y += Math.random() * 0.01;
			grain.isSettled = false; // Grains in the neck are never settled
		}

// Check for support
		const cellX = Math.floor(grain.x / cellSize);
		const cellY = Math.floor(grain.y / cellSize);
		const cellKey = `${cellX},${cellY}`;
		const cellBelow = `${cellX},${cellY + 1}`;
		let hasSupport = false;

if (spatialHash.has(cellBelow)) {
			const grainsBelowCell = spatialHash.get(cellBelow);
			for (const grainBelow of grainsBelowCell) {
				if (
					Math.abs(grain.x - grainBelow.x) < grain.collisionRadius * 2 &&
					grain.y < grainBelow.y &&
					grain.y + grain.collisionRadius * 2 > grainBelow.y
				) {
					hasSupport = true;
					break;
				}
			}
		}

// Apply gravity
		grain.velocity.y += 0.2; // Always apply full gravity

// Calculate new position
		let newX = grain.x + grain.velocity.x;
		let newY = grain.y + grain.velocity.y;

const bottomY = canvas.height - 120 - grain.collisionRadius;

// Check for collision with hourglass walls
		if (!isInsideHourglass(newX, newY, grain.collisionRadius)) {
			const normal = getHourglassNormalAt(newX, newY);
			const dot = grain.velocity.x * normal.x + grain.velocity.y * normal.y;

if (dot < 0) {
				grain.velocity.x -= 2 * dot * normal.x;
				grain.velocity.y -= 2 * dot * normal.y;
				grain.velocity.x *= 0.5;
				grain.velocity.y *= 0.5;
			}

// Adjust position to be inside the hourglass
			const hourglassCenter = canvas.width / 2;
			const hourglassWidthAtY = getHourglassWidthAtY(newY);
			const leftWall = hourglassCenter - hourglassWidthAtY / 2;
			const rightWall = hourglassCenter + hourglassWidthAtY / 2;
			newX = Math.max(
				leftWall + grain.collisionRadius,
				Math.min(rightWall - grain.collisionRadius, newX)
			);
		}

// Collision with bottom
		if (newY > bottomY) {
			newY = bottomY;
			grain.velocity.y = 0; // Stop vertical movement
			grain.velocity.x *= 0.8; // Apply some friction to horizontal movement
			grain.isSettled = true; // Consider the grain settled when it hits the bottom
		}

// Update position
		grain.x = newX;
		grain.y = newY;

// Update isSettled property
		if (
			canSettle &&
			hasSupport &&
			Math.abs(grain.velocity.x) < settlingThreshold &&
			Math.abs(grain.velocity.y) < settlingThreshold
		) {
			grain.isSettled = true;
		} else {
			grain.isSettled = false;
		}

// Apply settling friction if the grain is settled
		if (grain.isSettled) {
			grain.velocity.x *= settlingFriction;
			grain.velocity.y *= settlingFriction;
		}

// Spatial hashing
		if (!spatialHash.has(cellKey)) {
			spatialHash.set(cellKey, []);
		}
		spatialHash.get(cellKey).push(grain);

// Check if grain has passed the center
		if (!grain.passedCenter && grain.y > canvas.height / 2) {
			grain.passedCenter = true;
			grainsPassedCenter++;

const currentTime = Date.now();
			if (grainsPassedCenter === 1) {
				timerStarted = true;
				startTime = currentTime;
				lastGrainPassedTime = currentTime;
			} else if (grainsPassedCenter === numGrains) {
				timerEnded = true;
				endTime = currentTime;
			}

lastGrainPassedTime = currentTime;
		}
	});

// Collision resolution
	for (let iterations = 0; iterations < 2; iterations++) {
		spatialHash.forEach((cellGrains, cellKey) => {
			for (let i = 0; i < cellGrains.length; i++) {
				const grain = cellGrains[i];
				const nearbyKeys = [
					cellKey,
					`${cellKey.split(",")[0] - 1},${cellKey.split(",")[1]}`,
					`${cellKey.split(",")[0] + 1},${cellKey.split(",")[1]}`,
					`${cellKey.split(",")[0]},${cellKey.split(",")[1] - 1}`,
					`${cellKey.split(",")[0]},${cellKey.split(",")[1] + 1}`,
					`${cellKey.split(",")[0] - 1},${cellKey.split(",")[1] - 1}`,
					`${cellKey.split(",")[0] + 1},${cellKey.split(",")[1] - 1}`,
					`${cellKey.split(",")[0] - 1},${cellKey.split(",")[1] + 1}`,
					`${cellKey.split(",")[0] + 1},${cellKey.split(",")[1] + 1}`
				];

for (const nearbyKey of nearbyKeys) {
					if (spatialHash.has(nearbyKey)) {
						const nearbyCellGrains = spatialHash.get(nearbyKey);
						for (let j = 0; j < nearbyCellGrains.length; j++) {
							const otherGrain = nearbyCellGrains[j];
							if (grain !== otherGrain) {
								const dx = grain.x - otherGrain.x;
								const dy = grain.y - otherGrain.y;
								const distance = Math.sqrt(dx * dx + dy * dy);
								const minDist = grain.collisionRadius + otherGrain.collisionRadius;

if (distance < minDist) {
									// Collision detected, separate grains
									const angle = Math.atan2(dy, dx);
									const overlap = minDist - distance;

// Move grains apart
									const moveX = overlap * Math.cos(angle) * 0.5;
									const moveY = overlap * Math.sin(angle) * 0.5;
									grain.x += moveX;
									grain.y += moveY;
									otherGrain.x -= moveX;
									otherGrain.y -= moveY;

// Ensure grains stay inside the hourglass
									if (!isInsideHourglass(grain.x, grain.y, grain.collisionRadius)) {
										grain.x -= moveX;
										grain.y -= moveY;
									}
									if (
										!isInsideHourglass(
											otherGrain.x,
											otherGrain.y,
											otherGrain.collisionRadius
										)
									) {
										otherGrain.x += moveX;
										otherGrain.y += moveY;
									}

// Update velocities
									const nx = dx / distance;
									const ny = dy / distance;
									const p =
										(2 *
											(grain.velocity.x * nx +
												grain.velocity.y * ny -
												otherGrain.velocity.x * nx -
												otherGrain.velocity.y * ny)) /
										2;

grain.velocity.x -= p * nx * 0.5;
									grain.velocity.y -= p * ny * 0.5;
									otherGrain.velocity.x += p * nx * 0.5;
									otherGrain.velocity.y += p * ny * 0.5;

// Apply friction
									const friction = 0.3;
									grain.velocity.x *= 1 - friction;
									grain.velocity.y *= 1 - friction;
									otherGrain.velocity.x *= 1 - friction;
									otherGrain.velocity.y *= 1 - friction;
								}
							}
						}
					}
				}
			}
		});
	}

// Reset spatial hash for next frame
	spatialHash.clear();
}

function animate() {
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

drawHourglass();
	updateSandGrains();
	drawSandGrains();
	drawTimer();
	updateDataDisplay();

requestAnimationFrame(animate);
}

function calculateAverageGrainsPerSecond() {
	if (!timerStarted || grainsPassedCenter === 0) return 0;

const currentTime = Date.now();
	let elapsedSeconds;
	if (!timerEnded) {
		elapsedSeconds = (currentTime - startTime) / 1000;
	} else {
		elapsedSeconds = (endTime - startTime) / 1000;
	}
	return grainsPassedCenter / elapsedSeconds;
}

function updateDataDisplay() {
	const dataDisplay = document.getElementById("dataDisplay");
	const elapsedTime = timerStarted
		? timerEnded
			? endTime - startTime
			: Date.now() - startTime
		: 0;
	const averageGrainsPerSecond = calculateAverageGrainsPerSecond();

dataDisplay.innerHTML = `
 Grains Passed: ${grainsPassedCenter} / ${numGrains}
 Elapsed Time: ${(elapsedTime / 1000).toFixed(2)} seconds
 Average Grains/Second: ${averageGrainsPerSecond.toFixed(2)}
 `;
}

Frontend Forever App